<template>
    <div class="sign">
        <div class="sign-container">
            <div class="sign-logo">
                <span>logo</span>
            </div>
            <div class="sign-main">
                <div class="sign-title">
                    <!-- <template v-for="item in componentData" :key="item.name" >
                        <span class="sign-link"                            
                            :class="{ 'active': item.name === currentData?.name }">
                            <router-link :to="`/${item.path}`" v-if="item.isTab">
                                {{ item.title }}
                            </router-link>
                        </span>
                    </template> -->
                </div>
                <RouterView></RouterView>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
// 设置路由
// const setRouter = (name: any): SignComponents => {
//     const findIndex = componentData.findIndex(item => item.name === name)
//     const index = findIndex > -1 ? findIndex : 0
//     return componentData[index]
// }

// 设置当前路由为默认
// const route = useRoute()
// let currentData = reactive(setRouter(route.name))

// 监听路由变化设置新路由数据
// watch(() => route.name, value => {
//     currentData = setRouter(value)
// })
</script>

<style lang="less" scoped>
.sign {
    .size(100%, 100%);
    background-image: url('@/assets/image/bg.png');
    display: flex;
    align-items: center;

    .sign-container {
        margin: 0 auto;
        text-align: center;

        .sign-main {
            width: 400px;
            margin: 0 auto;
            border-radius: 4px;
            padding: 50px 50px 30px;
            background-color: var(--color-white);
            box-shadow: 0 0 8px rgba(0, 0, 0, .1);
            vertical-align: middle;
            display: inline-block;
            box-sizing: border-box;

            .sign-title {
                .clear-fix;
                text-align: center;

                .sign-link {
                    display: inline-block;
                    margin: 0 10px;

                    a {
                        display: block;
                        font-size: var(font-size-large);
                        color: var(--color-text-l);
                        padding: 10px 5px;
                    }
                }

                .active {
                    position: relative;

                    &:after {
                        content: '';
                        position: absolute;
                        left: 10%;
                        bottom: 0;
                        width: 80%;
                        height: 2px;
                        background-color: var(--color-primary);
                    }

                    a {
                        font-weight: 700;
                        color: var(--color-primary);
                    }
                }
            }
        }
    }
}
</style>
